Table of Contents for
Practical UI Patterns for Design Systems: Fast-Track Interaction Design for a Seamless User Experience

Diana MacDonald
Practical UI Patterns for Design SystemsFast-Track Interaction Design for a Seamless User Experience
Diana MacDonald
Victoria, VIC, Australia
ISBN 978-1-4842-4937-6e-ISBN 978-1-4842-4938-3
https://doi.org/10.1007/978-1-4842-4938-3
© Diana MacDonald 2019
This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed.
Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights.
While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein.
Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail orders-ny@springer-sbm.com, or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation.

In loving memory of Phillip MacDonald. Thanks for introducing me to the wild world of wordsmithing.

Introduction

Right now, design systems are flourishing, evolving. Each product or web site is no longer crafted in isolation, but as part of a larger conversation, in a social web, among chatbots and machine learning. It is our duty to ensure every piece of the system speaks to each other, from the components to the people, fluently and eloquently. Thanks to the shift toward “modular design,” we see harmonious experiences composed from the ground up of independent modules, such as videos or articles that stand well on their own and yet can also be arranged to fit cohesively into a larger whole. This is only possible when we use a consistent language for designing modules in a system so that every part delights and the whole resonates.

Peacock feathers consist of fractal patterns, as you can see in Figure 0-1 .
../images/481801_1_En_BookFrontmatter_Fig1_HTML.jpg
Figure 0-1.

Photo of a peacock displaying its train

Here you can see the beauty of the peacock’s feathers emerges from the repeated pattern presented together.

My hope is for this book to serve as a guide to designers and makers toward strong foundations upon which we build. With a solid grounding, we can spend more time remixing our ideas into tailored and personalized experiences. We can spend more time exploring the cutting edge, innovating, and crafting beautiful user experiences.

Who should read this book

This book is for designers, developers, marketers, and makers familiar with the basics of building the Web who want to produce better user experiences in digital products. This book will help you learn how to discern good from bad, build on existing communities of practice, and dig deep into fundamentals.

What you’ll find in this book

This book offers a concise guide to UI patterns: the tested, proven general mechanisms for solving recurring user interface problems, so that you don’t have to reinvent the wheel and can instead focus on designing solutions to the unique problems in your business.

You’ll find a smattering of code samples or visual examples throughout the book—only as much as is needed to demonstrate the idea and get you started. You’ll also find

  • Methods for discovering, evaluating, and implementing patterns according to best practices

  • Specific examples of real-world, business-critical UI patterns, including onboarding new users, information seeking and social sharing, as well as e-commerce purchase journeys

  • Vocabulary to help you match solutions to problems

  • Overview of the digital landscape and resources for further learning

Chapters 2 and 3 explore user signup and onboarding to highlight the process of discovering, evaluating, and understanding patterns through the theme of finding, reading, and sharing information.

Chapters 4 and 5 will cover how to consistently apply solid patterns through design systems and pattern libraries and how to avoid anti-patterns.

Finally, we’ll explore mixing and matching patterns for e-commerce in depth. This is where the magic happens. Most of the book will focus on potential solutions, so you can choose the right tool for your problems. This chapter, however, will explore a specific problem space and apply pattern solutions to these problems.

What you won’t find in this book

In the digital space, there’s a lot of crossover among software engineering, visual design, and information architecture. While these fields have their own rich heritage and history behind them that can inform digital interactions, we’ll be avoiding them because that’s far too much to cover in one book. However, I strongly encourage everyone to pursue information elsewhere to learn the history of their field of practice as well as the relevant disciplines that came before. For example, while copywriters and content strategists on the Web face uniquely digital challenges writing blogs, RSS feeds, tweets, and cross-channel content, they can learn immense amounts from journalists, librarians, and traditional marketers as some challenges remain the same as those found in these preexisting fields. I’ll touch on some copywriting practices for UI later on, but if you spend most of your day writing, you’ll want to dig further into these fields.

This book won’t cover exhaustive lists of available patterns for all scenarios. There is no complete code library or complete collection of design assets. I will only mention some particular resources, pattern libraries, and showcases that will help you find further extensive collections of patterns for different contexts. I’ll also point out common names for patterns that differ across libraries.

How to use this book

Patterns are neat because they elegantly package up all the things you need to know about interface and interaction design. They help you grow into the field. They are useful resources that you can refer back to (you don’t need to memorize all of them from the start). If you have the general gist of patterns available and instant access to all of them, all you need to do is look up the pattern you need when it comes time to solve a problem. If you know a handful of relevant, similar patterns, you can look them all up and weigh them one by one.

Use this book to learn how to recognize traits across seemingly unrelated patterns and how they similarly solve problems (e.g., continuous scrolling, tabs, and pagination might have more in common than you think). Then you can start with a problem space (whether driven by stakeholder engagement, user research, or technology), clarify the problem according to real user needs, validate them, then translate those needs into pattern solutions.

Use this book to learn how to communicate UI design solutions. Most of this book will be more valuable to people new to the practice of web and product design as they develop their vocabulary to discuss interface patterns. It may, however, also help experts learn how to share their solutions as they learn how to mentor.

This book will show you concrete examples of how to discover UI patterns, evaluate patterns, and communicate solutions to design problems and user needs. Use this book as a starting point for your journey into making digital user interfaces.

Acknowledgments

Thanks to all the fabulous people involved in bringing this book to life, including the friends and associates who encouraged me and gave me feedback. Thanks to Simon Mackie and Darin Dimitroff in helping me start this book. Thanks to Wesley Moore, who was with me through all of it.

Special thanks to the folks at Apress who made this book possible.

Table of Contents

Chapter 1:​ Introducing UI patterns 1
What’s a UI pattern?​ 1
Elements of a UI pattern 6
Other pattern details 9
Why care about patterns?​ 11
Design efficiently 11
Consistency and familiarity 12
Consistency and reuse 14
Communicating decisions 15
Communicating within teams and tools 16
Evidence-based solutions 18
Context-specific, tailored solutions 19
Content contributors without a web design background 19
Learning from the experts 19
Learning how to improve experiences from patterns 20
Summary 21
Chapter 2:​ Tap into patterns 23
Learning new patterns (sharpening the saw) 23
Pattern collections 24
Pattern galleries 25
Platform guidelines 26
UI frameworks 28
Pattern libraries, design systems, style guides, and anti-patterns 29
Inspiring visual style 29
Pattern:​ Walkthrough 30
Pattern:​ Playthrough 37
Pattern:​ Newsletter signup 43
Pattern:​ Validation feedback 48
Identifying relevant patterns 53
Searching for patterns 54
Pattern:​ Social signup 56
Pattern:​ Lazy signup 57
Competitive analysis 58
Learn from the best 60
Pattern:​ Notifications 61
Pattern:​ Good defaults 68
Pattern:​ Coachmarks 69
Implementing and tailoring patterns 73
Pattern:​ Progressive disclosure 74
Pattern:​ Staged disclosure 75
Pattern:​ Progressive reduction 79
Bringing it all together 81
Pattern:​ Login form 81
Example:​ Redesigning a login form 83
Summary 91
Chapter 3:​ Deciding which pattern to use and when 93
Context 93
Pattern:​ Autocomplete 94
Autosuggest 96
User context and performance 98
Pattern:​ Search filters 99
Information architecture 102
Multiple filters 104
Filter feedback 105
Choosing filters 107
Live filters 108
Batch filters 109
Error prevention and recovery 111
Pattern:​ Activity feed 112
Pattern:​ Favorites 115
A rose by any other name 117
Microcopy 119
Pattern:​ Pagination 120
Where to draw the line 121
Accessibility 122
Pattern:​ Infinite scroll 123
Principle of choices in action 125
Principle of disclosure in action 126
Inclusive design 127
Infinite scroll vs.​ pagination 128
Infinite scroll and favorites 128
Pattern:​ Follow 129
Pattern:​ Friend’s list 131
Friends and followers 132
Interaction and motion design 133
Triggers 134
Action 136
Feedback 136
When is a pattern a bad idea?​ 137
Example:​ Login form 137
Summary 142
Chapter 4:​ Patterns in design systems 143
What’s in a name?​ The devil is in the details 143
Pattern libraries 144
Design systems 144
Related design, code, and content resources 145
Editorial style guides 145
Brand guides 147
Design guidelines and visual language 149
Style guides relating to code 151
Templates and Content Management Systems (CMSs) 158
Building design systems using patterns 158
When to use a design system 159
Framing 160
Workflows and design processes 162
Pattern previews 164
Code assets 176
Prototyping in the browser 176
Writing code 177
Converting design elements to code 178
Design assets 180
Writing and content 182
Documenting patterns or components 182
Extra design system features 183
Growing a design system 186
Kick off 186
Assembly 187
Versioning 188
Serving assets 191
Tools 191
Evolution 192
Summary 192
Chapter 5:​ Anti-patterns and dark patterns 193
What are anti-patterns?​ 193
Why care about anti-patterns?​ 195
Anti-pattern:​ Hamburger basement 196
What are dark patterns?​ 202
Manipulinks and Confirmshamers 203
Design smells 206
Too Much Information (TMI) 207
Modals and pop-ups 209
Modal UI pattern 209
Modal design smell 213
Pop-up anti-pattern 214
“Overall pattern” design smell 219
The lifetime of a bad pattern 220
Chapter 6:​ Mixing and matching patterns 223
How to combine patterns successfully to build a more complex UI:​ Scoped searches example 224
Reuse elements across patterns:​ Categories as search filters 225
Cut duplicate content from combined patterns:​ Categories as search terms 231
Efficiently combine patterns to avoid the need for others:​ Autosuggest and thumbnails 233
Interstitial patterns:​ Autosuggest and navigable categories 236
Visually combine and distinguish patterns:​ Categories in tabbed navigation 243
Preserve or discard data in repeated use of patterns:​ Clearing filters on new searches 249
Clarify repeated patterns:​ Inline tags 252
Evaluate resulting trade-offs:​ Infinite scroll 253
Other forms of scoped search 256
Favoriting becomes wish listing 256
Wish lists/​wish listing 257
Combining wish listing and lazy signup 259
When and how to break away from patterns 260
Investigate design smells 260
Review pattern principles for identified usability problems 261
Review problem and context 262
Strive for predictability 263
Innovate 264
How to break the rules 265
When to break patterns in design systems 267
Summary 268
Chapter 7:​ Conclusion 271
Looking to the future 272
Appendix:​ Suggested reading 275
Chapter 2 275
Chapter 3 280
Chapter 4 281
Chapter 5 285
Index 287

About the Author and About the Technical Reviewer

About the Author

Diana MacDonald
../images/481801_1_En_BookFrontmatter_Figb_HTML.jpg

is a Melbourne product designer, raised in the tropical north of Australia. She has relished the tech industry for over a decade, exploring the digital space with progressive organizations like Culture Amp, Bellroy, and SitePoint. At Culture Amp, she led the new design systems team to accelerate UI design and development. She values inclusive and remarkable stories. You can find out more about her on her LinkedIn profile ( www.linkedin.com/in/diana-macdonald-didoesdigital ) and contact her via Twitter ( https://twitter.com/didoesdigital ).

 

About the Technical Reviewer

Katherine Joyce
../images/481801_1_En_BookFrontmatter_Figc_HTML.png

is a passionate designer and developer with over 7 years of experience having worked across the financial and government sectors. She creates innovative, intuitive customer experiences and is an advocate of accessible design. As Lead UX/UI Designer at Alt Labs, she is leading the UX vision and crafting beautiful solutions driven by user needs. In her previous role she worked as a Senior UX/UI Designer for Accenture, promoting accessible design in government services and helping automate legacy processes to improve the customer journey. She has also spent over 5 years with AXA Insurance as an Application Support Software Developer where she fixed bugs in legacy financial systems, debugged issues with browser compatibility, and suggested improvements to customer-facing journeys. She is passionate about advocating accessible design and mentoring those who would like to have a career in design or development.

 

    Highlight

    ?
    Reset